import React, {useEffect} from "react";
import Avatar from "@mui/material/Avatar";
import {CardActionArea, Grid, Typography} from "@mui/material";
import {Navigate} from "react-router-dom";

export default function Singer(props) {
    const [go, setGo] = React.useState(false);

    const {img,name,id,from,allSinger} = props;
    useEffect(async () => {

        // await init()

    },[])
    function toSingerDetail(){
        setGo(true);
    }
    function goSingerDetail(){


        return <Navigate to='/singerDetail' state={{id:id,from:from,allSinger:allSinger,img:img,name:name}}/>
    }
    return (
        <Grid item xs={3} marginBottom={5}>
            <CardActionArea onClick={toSingerDetail}>
                <Grid container direction='row'>
                    <Avatar sx={{ width: 64, height: 64 }} alt="face" src={img} />
                    <Typography variant="h5" marginLeft={5} maxWidth={230}>
                        {name}
                    </Typography>
                </Grid>
            </CardActionArea>
            {go?goSingerDetail():""}
        </Grid>
    )
}